<nav>
    <ul>
        <li id="nav-logo">
            <div class="logo-box" title="TalkTime"></div>
        </li>
        <li id="nav-avatar">
            <app-avatar [avatar]="getAvatar()"></app-avatar>
        </li>
        <li class="m-btn">
            <div class="m-btn-box workbench" routerLinkActive="active">
                <a routerLink="/workbench" i18n-title title="Workbench"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box chat" [class.active]="toggledChat">
                <a (click)="toggleChat()" href="javascript:;" i18n-title title="Chat"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box record" routerLinkActive="active">
                <!-- <a routerLink="/record" i18n-title title="Record"></a> -->
                <a (click)="toggleRecord()" href="javascript:;" i18n-title title="Record"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box calendar" routerLinkActive="active">
              <!-- routerLink="/schedule" -->
                <a (click)="toggleSchedule()" href="javascript:;"
                 i18n-title title="Schedule"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box email">
                <!-- <a [href]="getMailUrl()" target="_blank" i18n-title title="E-Mail"></a> -->
                <a (click)="toggleEMail()" i18n-title title="E-Mail"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box personal">
                <!-- <a [href]="getPersonalUrl()" target="_blank" i18n-title title="Personal Center"></a> -->
                <a (click)="togglePersonal()" target="_blank" i18n-title title="Personal Center"></a>
            </div>
        </li>
        <li class="m-btn">
            <div class="m-btn-box setting">
                <a routerLink="/settings" i18n-title title="Setting"></a>
            </div>
        </li>
    </ul>

</nav>
